html {
  scroll-behavior: smooth;
}

.header {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: #000;
  padding: 1em 0 .8em;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;

  .container {
    .navbar-header {
      .navbar-toggle {
        float: none;
      }

      .logo {
        margin-top: -1.4em;
      }
    }

    .nav {
      li {
        a {
          color: #fff;
          font-family: OSBold;
          font-size: 1em;
          text-transform: uppercase;
          border-bottom: 3px solid transparent;
          transition: all linear .3s;

          &:hover {
            transform: translateY(-10px);
            border-bottom: 3px solid #6db3bb;
          }
        }
      }
    }

    .head-right {
      position: fixed;
      top: 2em;
      right: 6em;

      a {
        color: #fff;
        font-size: 1em;

        &:hover>span {
          transform: scale3d(1.3, 1.3, 1);
        }

        &:first-child {
          margin-right: 1em;
        }

        span {
          margin-right: 5px;
          transition: all linear 0.3s;

        }
      }
    }
  }

  @media screen and (max-width:1000px) {
    .container {
      .nav {
        li {
          a {
            text-align: center;
          }
        }
      }

      .head-right {
        margin-right: -4.5em;
      }
    }

  }

  @media screen and (max-width: 550px) {
    .container {
      .navbar-header {
        .logo {
          img {
            width: 80%;
            margin: .5em auto;
          }
        }
      }
    }
  }
}

.home {
  width: 100%;

  .box {
    position: relative;

    img {
      width: 100%;
    }

    .text {
      position: absolute;
      top: 14em;
      left: 30em;

      .subject {
        width: 10em;
        text-transform: uppercase;
        color: #fff;
        font-size: 5em;
        letter-spacing: 1px;
      }

      .details {
        width: 9em;
        padding: .5em 1em;
        background-color: #000;
        text-align: center;
        font-size: 1.5em;
        color: #fff;
        text-transform: uppercase;
        margin-left: 18em;
        margin-top: 2em;
        cursor: pointer;
        transition: all linear .3s;

        &:hover {
          transform: scale3d(1.2, 1.2, 1);
        }
      }
    }
  }

  @media screen and (max-width:1400px) {
    .box {
      .text {
        margin-left: -5em;
        margin-top: -4em;

        .subject {
          font-size: 4em;
        }

        .details {
          width: 8em;
          padding: .5em 0em;
          font-size: 1em;
          margin-left: 22em;
        }
      }
    }
  }

  @media screen and (max-width: 1100px) {
    .box {
      .text {
        margin-left: -10em;
        margin-top: -4em;

        .subject {
          font-size: 3em;
        }

        .details {
          width: 8em;
          padding: .5em 0em;
          font-size: 1em;
          margin-left: 17em;
        }
      }
    }
  }

  @media screen and (max-width: 900px) {
    .box {
      .text {
        margin-left: -14em;
        margin-top: -4em;

        .subject {
          font-size: 2em;
        }

        .details {
          width: 6em;
          padding: .5em .5em;
          font-size: .6em;
          margin-left: 19em;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  @media screen and (max-width: 800px) {
    .box {
      .text {
        display: none;
      }
    }
  }
}

.snowboards {
  width: 100%;
  background-color: #fff;
  padding: 6em 0 2em;
  overflow: hidden;
  text-align: center;

  .subject {
    font-size: 3em;
    text-transform: uppercase;
    margin-bottom: .8em;
  }

  .top-desc {
    font-size: 1em;
    color: #000;
    font-family: OSLight;
    text-transform: uppercase;
    margin-bottom: 1.5em;
  }

  .photo {
    margin-top: 8em;
    margin-bottom: 3em;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
      width: 12%;
      cursor: pointer;
      transition: all linear .3s;

      &:hover {
        transform: translateY(-10px);
      }

      img {
        width: 100%;
      }
    }
  }

  .foot-desc {
    text-transform: uppercase;
    font-size: 1.5em;
    color: #000;
  }

  @media screen and (max-width:1100px) {
    .photo {
      flex-wrap: wrap;

      .item {
        width: 30%;
        margin-bottom: 1em;

        img {
          width: 60%;
        }
      }
    }
  }

  @media screen and (max-width:550px) {
    padding: 4em 0 2em;

    .subject {
      font-size: 2em;
    }

    .icon {
      img {
        width: 25px;
        height: 25px;
      }
    }

    .top-desc {
      font-size: 1em;
    }

    .foot-desc {
      font-size: 1.2em;
    }

    .photo {
      margin-top: 2em;
      margin-bottom: 1.5em;
      flex-wrap: wrap;

      .item {
        width: 45%;
        margin-bottom: 1em;

        img {
          width: 60%;
        }
      }
    }
  }
}

.snowboarding {
  position: relative;
  width: 100%;

  .bgImg {
    width: 100%;
  }

  .text {
    width: 40%;
    position: absolute;
    top: 20em;
    left: 12em;

    .subject {
      text-transform: uppercase;
      font-size: 3em;
      color: #fff;
      white-space: wrap;
      margin-bottom: 1em;
    }

    .desc1 {
      font-size: 1.2em;
      color: #b9b9b9;
      margin-bottom: 1em;
    }

    .desc2 {
      font-size: 1.2em;
      color: #b9b9b9;
    }
  }

  @media screen and (max-width:1200px) {
    .text {
      width: 60%;
      margin-left: -10%;
      margin-top: -8%;
    }
  }

  @media screen and (max-width:1000px) {
    .text {
      width: 60%;
      margin-left: -16%;
      margin-top: -12%;

      .subject {
        font-size: 2.5em;
      }

      .desc1 {
        font-size: 1em;
      }

      .desc2 {
        font-size: 1em;
      }
    }
  }

  @media screen and (max-width:850px) {
    .text {
      width: 60%;
      margin-left: -18%;
      margin-top: -18%;

      .subject {
        font-size: 2.5em;
      }

      .desc1 {
        font-size: 1em;
      }

      .desc2 {
        font-size: 1em;
      }
    }
  }

  @media screen and (max-width: 800px) {
    .text {
      display: none;
    }
  }

}

.features {
  width: 100%;
  background-color: #fff;
  text-align: center;
  overflow: hidden;
  padding: 6em 0;

  .container {
    .subject {
      font-size: 3em;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: .8em;
    }

    .photo {
      display: flex;
      justify-content: space-around;
      margin-top: 7em;

      .item {
        width: 23%;
        cursor: pointer;
        transition: all linear .3s;

        img {
          width: 100%;
          margin-bottom: 1em;
        }

        .desc {
          font-size: 1.2em;
          text-align: left;
          font-weight: bold;
        }

        &:hover {
          transform: scale(1.1);
        }

      }
    }
  }

  @media screen and (max-width:1000px) {
    .container {
      width: 70%;

      .subject {
        font-size: 2.5em;
      }

      .icon {
        img {
          width: 30px;
          height: 30px;
        }
      }

      .photo {
        flex-wrap: wrap;

        .item {
          width: 40%;
          margin-bottom: 1em;
        }
      }
    }
  }

  @media screen and (max-width:550px) {
    padding: 4em 0 2em;

    .container {
      width: 90%;

      .subject {
        font-size: 2em;
      }

      .icon {
        img {
          width: 25px;
          height: 25px;
        }
      }

      .photo {
        margin-top: 2em;
        flex-wrap: wrap;

        .item {
          width: 100%;
          display: flex;
          margin-bottom: 1.5em;

          img {
            width: 60%;
            margin-right: 1em;
          }
        }
      }
    }
  }
}

.contact {
  width: 100%;
  background-color: #000;
  padding: 5em 0 2em;
  overflow: hidden;
  text-align: center;

  .container {
    .top {
      width: 100%;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 6em;

      .item {
        width: 23%;
        text-align: left;

        .title {
          text-transform: uppercase;
          font-size: 1.5em;
          line-height: 1em;
          color: #fff;
          font-family: OSBold;
          margin-bottom: 1.5em;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .text {
          p {
            color: #c9c9c9;
            font-size: 1em;
            margin-bottom: 0.8em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }

        .input-box {
          width: 100%;
          display: flex;
          margin-bottom: 4em;

          input {
            width: 80%;
            padding: 0em .8em;
            border: none;
            outline: none;

            &::placeholder {
              color: #6c6c6c;
              font-size: 1em;
            }
          }

          .go-btn {
            width: 20%;
            padding: 1.2em 1.1em;
            background-color: #c7c7c7;

            cursor: pointer;

            p {
              font-size: 1em;
              font-weight: bold;
              transition: all linear .3s;
            }

            &:hover>p {
              transform: scale3d(1.2, 1.2, 1);
              text-shadow: 0px 0px 5px #ffffff;
            }
          }
        }

        .icon-box {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .icons {
            width: 65%;
            display: flex;
            justify-content: space-between;

            .icon {
              cursor: pointer;
              transition: all linear .3s;

              &:hover {
                transform: translateY(-5px) scale3d(1.3, 1.3, 1);
              }
            }
          }

          .tag {
            color: #fff;
            font-size: .8Sem;

            span {
              background-color: #fff;
              color: #000;
              padding: .1em .1em;
              border-radius: 4px;
            }
          }
        }
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .brand {
        font-size: 1em;
        color: #fff;
      }

      .city {
        display: flex;
        align-items: center;
        justify-content: center;

        p {
          font-size: 1em;
          color: #fff;
          margin-left: 1em;
        }
      }
    }
  }

  @media screen and (max-width:1000px) {
    .container {
      width: 90%;

      .top {
        flex-wrap: wrap;

        .item {
          width: 40%;
          margin-bottom: 2em;
        }
      }
    }
  }

  @media screen and (max-width:550px) {
    padding: 4em 0 2em;

    .container {
      width: 90%;

      .top {
        flex-wrap: wrap;

        .item {
          width: 100%;

          .input-box {
            width: 72%;
          }

          .icon-box {
            width: 70%;
          }
        }
      }
    }
  }
}